import 'package:flutter/material.dart';
import 'package:xlsk/utils/dimension.dart';

class Checkview extends StatefulWidget {
  String title = '';
  List<dynamic> list = [];
  bool isMore; //是否能多选
  String outPut = '';
  String checkedId = '';
  var onChange;

  Checkview({
    required this.title,
    required this.list,
    this.isMore = false,
    required this.onChange,
    required this.checkedId,
  });

  @override
  State<StatefulWidget> createState() {
    return _checkboxState();
  }
}

class _checkboxState extends State<Checkview> {
  @override
  void initState() {

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: Dimension(context).toPx(343),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(bottom: Dimension(context).toPx(16)),
            child: Text('${widget.title}',style: TextStyle(color: Color(0xff1f2329),fontSize: Dimension(context).toPx(14),fontWeight: FontWeight.w700)),
          ),
          Wrap(
            spacing: Dimension(context).toPx(8),
            runSpacing: Dimension(context).toPx(8),
            children: createView(),
          )
        ],
      ),
    );
  }

  createView(){
    initList();

    List<Widget> view = [];
    List list = widget.list;
    String checkedId = ',' + widget.checkedId + ','; // 防止出现'1,55'.contains('5')为true的错误
    for(var item in list){
      String itemId = ',' + item['id'] + ',';
      if(checkedId.contains(itemId)){
        item['isCheck'] = true;
      }else{
        item['isCheck'] = false;
      }
      Widget viewItem = GestureDetector(
        onTap: (){
          if(!widget.isMore){
            for(var i in list){
              i['isCheck'] = false;
            }
          }
          item['isCheck'] = !item['isCheck'];
          setState(() {
            widget.list = list;
            getOutPutData();
          });
        },
        child: Container(
          width: Dimension(context).toPx(109),
          height: Dimension(context).toPx(32),
          padding: EdgeInsets.symmetric(horizontal:Dimension(context).toPx(5)),
          decoration: BoxDecoration(
            color: item['isCheck']?Color(0xffe6f2ff):Color(0xfff7f8fa),
            borderRadius: BorderRadius.all(Radius.circular(Dimension(context).toPx(4)))
          ),
          child: Center(
            child: Text('${item['title']}',style: TextStyle(fontSize: Dimension(context).toPx(12),color: item['isCheck']?Color(0xff1661ff):Color(0xff1f2329)),maxLines: 1,overflow: TextOverflow.ellipsis),
          ),
        ),
      );
      view.add(viewItem);
    }
    return view;
  }

  void getOutPutData(){
    List list = widget.list;
    String outPut = '';
    for(var item in list){
      if(item['isCheck']){
        outPut += item['id'].toString() + ',';
      }
    }
    if(outPut.length>0){
      outPut = outPut.substring(0,outPut.length-1);
    }
    setState(() {
      widget.outPut = outPut;
      widget.onChange(outPut);
    });
  }

  void initList(){
    // 解决数组中的对象无法赋值isCheck的bug
    List<dynamic> _list = [];
    for(var item in widget.list){
      Map<String,dynamic> res = {
        'id':item['id'],
        'title':item['title'],
      };
      _list.add(res);
    }
    setState(() {
      widget.list = _list;
    });
  }

  @override
  void dispose() {
    super.dispose();
  }
}
